<template>
  <div class="add-event-type-page">
    <!-- 添加通用页头 -->
    <PageHeader 
      title="选择事件类型"
      showLeftButton="true"
      leftText="取消"
      @left-button-click="handleLeftButton"
    />
    <div class="content">
      <div class="type-grid">
        <div 
          v-for="type in eventTypes" 
          :key="type.value"
          class="type-item"
          @click="selectType(type.value)"
        >
          <div class="type-icon">{{ type.icon }}</div>
          <div class="type-name">{{ type.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'

export default {
  name: 'AddEventTypePage',
  components: {
    PageHeader
  },
  data() {
    return {
      eventTypes: [
        { label: '教育经历', value: 'education', icon: '🎓' },
        { label: '职业发展', value: 'career', icon: '💼' },
        { label: '家庭生活', value: 'family', icon: '👪' },
        { label: '健康状况', value: 'health', icon: '🏥' },
        { label: '旅行经历', value: 'travel', icon: '✈️' },
        { label: '兴趣爱好', value: 'hobby', icon: '🎯' },
        { label: '其他', value: 'other', icon: '📌' }
      ]
    }
  },
  methods: {
    // 处理左侧按钮点击（取消）
    handleLeftButton(defaultAction) {
      this.$router.back()
    },
    
    selectType(type) {
      // 将选择的类型存储起来，传递到下一步
      localStorage.setItem('selectedEventType', type)
      this.$router.push({
        path: '/add-event-info',
        query: { type }
      })
    }
  }
}
</script>

<style scoped>
.add-event-type-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20px 16px;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.type-item:active {
  transform: scale(0.95);
  background-color: #f8f9fa;
}

.type-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.type-name {
  font-size: 14px;
  color: #333;
}
</style>